<template>
    <div>
        <a href="/Add">新增</a>
        <input type="text" v-model="ts.id">
        <input type="button" value="查询" @click="xx">
        <input type="button" value="重置" @click="xxz">
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>日期</td>
                    <td>房态</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td>{{ a.id }}</td>
                    <td>{{ a.name }}</td>
                    <td>{{ moment(a.dates).format("YYYY-MM-DD") }}</td>
                    <td>{{ a.houses==1?"开房":"闭房" }}</td>
                    <td>{{ a.num }}</td>
                    <td>
                        <input type="button" value="删除" @click="del(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" v-for="c in ts.size" :value="c" @click="tiao(c)">
        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        当前{{ ts.index }}页,每页{{ ts.size }}条,共{{ zys.list }}页,共{{ zys.row }}条
        <select v-model="ts.size" @click="yel">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import moment from 'moment';
onMounted(()=>{
    show()
})
const del=(val:any)=>{
    axios.delete("https://localhost:7238/api/House/DelHouse",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
const xxz=()=>{
    ts.value={
        index:1,
        size:2,
        id:0
    }
    show()
}
const xx=()=>{
    show()
}
const yel=()=>{
    show()
}
const tiao=(val:any)=>{
    ts.value.index=val;
    show()
}
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
const ts=ref({
    index:1,
    size:2,
    id:0
})
const zys=ref({
    list:0,
    row:0
})
const show=()=>{
    axios.get("https://localhost:7238/api/House/Show",{params:ts.value}).then(res=>{
        date.value=res.data.row

        zys.value.list=res.data.list
        zys.value.row=Math.ceil(res.data.list/ts.value.size)
    })
}
const date=ref([{
  "id": 0,
  "name": "",
  "dates": "",
  "num": "",
  "houses": 0
}])
</script>

<style scoped>

</style>